<template>
	<div class="home">
		<!-- <Tabbar  style="width:100%;z-index: 9999;top: 3px; position: absolute;" :titie="$i18n.t('textTrans.注册')" :hidden='true'></Tabbar> -->
		<div class="loginCon">
			<img  src="../../assets/imgs/tabs/lang.png" @click="show = true"
				style="width: 20px;height :20px;margin-right: 10px;position: absolute;z-index: 99999999999;top: 15px;right: 15px;">
			<!-- <Tabbar :leftArrow='true' style="width: 100%;position: absolute;top: 15px;z-index: 19999;" :langshow='true' :hidden='true'></Tabbar> -->
			<van-icon name="arrow-left" size="16" color="white" @click='$router.go(-1)' style="position: absolute;top: 10px;left: 10px;"/>
			<div class="top">
				<img src="../../assets/imgs/home/login_back.png" alt="" />
			</div>
			<div class="bottom">
				<div style="text-align: center;margin-top: -50px;">
					<img src="../../assets/imgs/tabs/logo.png" style="width: 100px;height: 100px;" alt="">
				</div>
				<van-field v-model="form.member" :placeholder="$t('textTrans.请输入账号')" 
					clearable>
				</van-field>
				<van-field v-model="form.password" :placeholder="$t('textTrans.请输入密码')" type="password" clearable style="margin:20px 0;">
				</van-field>
				<van-field v-model="form.password_re" :placeholder="$t('textTrans.请再次输入密码')" type="password" clearable style="margin:20px 0;">
				</van-field>
				<van-field v-model="form.pay_password" :placeholder="$t('textTrans.请输入资金密码')" type="password" clearable style="margin:20px 0;">
				</van-field>
				<van-field v-model="form.pay_password_re" :placeholder="$t('textTrans.请再次输入资金密码')" type="password" clearable style="margin:20px 0;">
				</van-field>
				<van-field v-model="form.uuid" :placeholder="$t('textTrans.请输入邀请码')"  clearable style="margin:20px 0;">
				</van-field>
				<van-field v-model="form.code" :placeholder="$t('textTrans.请输入验证码')"  clearable>
					<template #button>
					<img v-if="srcshow" @click="changesrc" style="width: 100px;height: 45px;" :src="src" alt="">
					</template>
				</van-field>
				<van-button class="loginBtn" @click="submitReg">{{$t('textTrans.注册')}}</van-button>
				
				<van-button class="loginBtn"  style="margin-top:15px;border: 2px solid #00A170;background: white;color:#00A170 ;"  @click="$router.push({ name: 'login' })" 	>{{$t('textTrans.登录')}}</van-button>
				<!-- <div class="register"	style="padding-bottom: 60px;"	>{{$t('textTrans.登录')}}</div> -->
				<div @click="$router.push({ name: 'registerpage' })" style="font-size: 13px;text-align: center;color: #00A170;margin-top: 20px;"><<{{$t('textTrans.注册协议')}}>></div>
				<!--  <div class="bottom-nav">
					<div @click="$router.push({ name: 'Register' })">{{$t('textTrans.立即注册')}}</div>
					<div @click="$router.push({ name: 'setpass' })">{{$t('textTrans.忘记密码')}}</div>
				  </div> -->
				  <!-- <img src="../../assets/imgs/home/login_bottom.png" style="width: 90px;height: 100px;position: absolute;bottom: 0;z-index: 9;right: 0;" alt=""> -->
			</div>
		</div>
		<van-action-sheet v-model="show" :actions="actions" :cancel-text="$t('textTrans.取消')" close-on-click-action
			@select="getLang" @cancel="show = false" />
	</div>
</template>
<script>
	import {
		register,
		sendSms
	} from "@/api/login";
	import Tabbar from "@/components/tabbar";
	export default {
		data() {
			return {
				actions: [{
					name: this.$i18n.t("textTrans.英语"),
				}, {
					name:  this.$i18n.t("textTrans.阿拉伯"),
				}, {
					name:  this.$i18n.t("textTrans.德国"),
				}, {
					name: this.$i18n.t("textTrans.西班牙"),
				}, {
					name: this.$i18n.t("textTrans.法国"),
				}, {
					name:  this.$i18n.t("textTrans.印度尼西亚"),
				}, {
					name:  this.$i18n.t("textTrans.日语"),
				}, {
					name: this.$i18n.t("textTrans.韩语"),
				}, {
					name: this.$i18n.t("textTrans.葡萄牙"),
				}, {
					name: this.$i18n.t("textTrans.土耳其"),
				}, {
					name: this.$i18n.t("textTrans.中文繁体"),
				}],
				src:'/api/login/code',
				srcshow:true,
				show:false,
				disabled: false,
				timer: null,
				timeTips: "发送验证码",
				time: 60,
				readonly: false,
				form: {
					
				},
			};
		},
		created() {
			if(this.$route.query.uuid){
				this.form = {...this.form,uuid:this.$route.query.uuid}
			}
		},
		components: {
			Tabbar,
		},
		methods: {
			getLang(e) {
				console.log(e.name)
				if (e.name == this.$i18n.t("textTrans.英语")) {
					this.$i18n.locale = 'en';
					localStorage.setItem('lanage', '1')
					localStorage.setItem('lanagetype', 'en')
				} else if (e.name == this.$i18n.t("textTrans.阿拉伯")) {
					this.$i18n.locale = 'alb';
					localStorage.setItem('lanage', '8')
					localStorage.setItem('lanagetype', 'alb')
				} else if (e.name == this.$i18n.t("textTrans.德语")) {
					this.$i18n.locale = 'dg';
					localStorage.setItem('lanage', '5')
					localStorage.setItem('lanagetype', 'dg')
				} else if (e.name == this.$i18n.t("textTrans.西班牙")) {
					this.$i18n.locale = 'xby';
					localStorage.setItem('lanage', '10')
					localStorage.setItem('lanagetype', 'xby')
				} else if (e.name == this.$i18n.t("textTrans.法语")) {
					this.$i18n.locale = 'fg';
					localStorage.setItem('lanage', '7')
					localStorage.setItem('lanagetype', 'fg')
				} else if (e.name == this.$i18n.t("textTrans.印度尼西亚")) {
					this.$i18n.locale = 'yn';
					localStorage.setItem('lanage', '3')
					localStorage.setItem('lanagetype', 'yn')
				} else if (e.name == this.$i18n.t("textTrans.日语")) {
					this.$i18n.locale = 'rb';
					localStorage.setItem('lanage', '6')
					localStorage.setItem('lanagetype', 'rb')
				} else if (e.name == this.$i18n.t("textTrans.韩语")) {
					this.$i18n.locale = 'hg';
					localStorage.setItem('lanage', '4')
					localStorage.setItem('lanagetype', 'hg')
				} else if (e.name == this.$i18n.t("textTrans.葡萄牙")) {
					this.$i18n.locale = 'pty';
					localStorage.setItem('lanage', '2')
					localStorage.setItem('lanagetype', 'pty')
				} else if (e.name ==  this.$i18n.t("textTrans.土耳其")) {
					this.$i18n.locale = 'trq';
					localStorage.setItem('lanage', '9')
					localStorage.setItem('lanagetype', 'trq')
				} else if (e.name == this.$i18n.t("textTrans.中文繁体")) {
					this.$i18n.locale = 'zhf';
					localStorage.setItem('lanage', '11')
					localStorage.setItem('lanagetype', 'zhf')
				}
				location.reload();
			},
			changesrc(){
				this.srcshow = false
				setTimeout(()=>{
					this.srcshow = true
				},500)
			},
			toLogin() {
				this.$router.push({
					name: "mall",
				});
			},
			getCode() {
				sendSms(this.form.member).then((res) => {
					let time = this.time;
					const timer = setInterval(() => {
						if (time <= 1) {
							this.disabled = false;
							this.timeTips = "发送验证码";
							clearInterval(timer);
						} else {
							this.disabled = true;
							time--;
							this.timeTips = time + "s后重新获取";
						}
					}, 1000);
				});
			},
			submitReg() {
				// if (!this.form.member) {
				// 	this.$toast("Please enter the member");
				// 	return;
				// }
				// if (!this.form.password) {
				// 	this.$toast("Please enter the password");
				// 	return;
				// }

				register(this.form).then((res) => {
					if(res.app_token){
						localStorage.setItem("usertoken", res.app_token);
						localStorage.setItem('show', 1)
						this.$router.push({
							name: "mall",
						});
					}
				
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.home {
		width: 100%;
		height: 100%;
		background: white;

		.register {
			font-size: 14px;
			margin: 20px;
			text-align: center;
			color: #00A170;
		}

		.top {
			width: 100%;
			text-align: center;

			img {
				width: 100%;
				height: 240px;
			}
		}

		.bottom {
			width: 94%;
			position: absolute;
			z-index: 4;
			top: 250px;
			background: #bededd;
			border-radius: 20px 20px 0 0;
			margin-top: -50px;
			padding: 20px 3%;

		}

		.loginTop {
			width: 100%;
			height: 187px;

			.van-nav-bar {
				background-color: transparent;
			}

			[class*="van-hairline"]::after {
				border: 0 none;
			}
		}

		.bottom-nav {
			display: flex;
			padding: 14px 14px;
			font-size: 14px;
			color: #00A170;
			justify-content: space-between;
		}

		.loginCon {
			position: relative;
			width: 100%;
			margin-top: -40px;
			border-radius: 10px;
			background: white;
			z-index: 99;
			padding-top: 20px;
			box-sizing: border-box;



			/deep/ [class*="van-hairline"]::after {
				border: 0 none;
			}
		}

		.loginIcon {
			width: 16px;
			height: 20px;
		}

		.van-field {
			margin: 10px auto;
			padding-left: 0;
			background: #F8F8F8;
			padding: 14px 10px;
			border-radius: 25px;

			/deep/.van-button--primary {
				color: #333;
				background: #ff6d00;
				border: none;
			}

			.van-field__button {
				.van-button {
					color: #333;
					font-size: 15px;
				}
			}
		}

		.van-cell:not(:last-child)::after {
			border: 0 none;
		}

		/deep/.van-field__control {
			&::placeholder {
				color: #999999;
			}
		}

		/deep/.van-field__control {
			color: #333;
		}

		.loginBtn {
			background: #00A170;
			width: 100%;
			display: block;
			height: 49px;
			font-size: 15px;
			font-weight: bold;
			margin: 45.5px auto 0;
			border-radius: 25px;
			border: none;
			color: #fff;
			line-height: 44px;
		}
	}
</style>
